<template>
	<view class="" style="padding-bottom: 76rpx;">
		<cu-custom isBack></cu-custom>
		<view class="bg">
			<image src="@/static/bind-pet.png" mode=""></image>
		</view>
		<view class="box">
			<view class="tab">
				<view @click="handleTab(index)" v-for="(item,index) in tabList" :key="index"
					:class="tabIndex==index?'active':''" class="tab-item">
					{{item.name}}
				</view>
			</view>
			<view class="item">
				<picker range-key="name" class="item-pick" @change="handlePicker($event,'typeIndex')" :value="typeIndex" :range="typeList">
					<view :style="typeIndex==-1?'color:#BBBBBB;':''">{{typeIndex>=0?typeList[typeIndex].name:'选择宠物'}}</view>
				</picker>
				<image src="@/pagesPet/static/icon/check.png" mode=""></image>
			</view>
			<view v-if="!tabIndex" class="item">
				<input @input="inputChange" v-model="form.bindPhone" type="number" maxlength="11" placeholder="填写宠物主手机号码"
					placeholder-class="petInputStyle" />
			</view>
			<view class="item">
				<input @blur="priceChange" v-model="form.price" type="digit" placeholder="填写宠物价格"
					placeholder-class="petInputStyle" style="flex: 1;"/>
				<view class="text">元</view>
				<view v-if="tabIndex" @click="submitPrice" class="price">确定价格</view>
			</view>
			<view v-if="tabIndex" class="code">
				<view class="code-img" >
					<image v-if="typeList[typeIndex]" :src="typeList[typeIndex].qrcode" mode="aspectFill"></image>
				</view>
				<view class="code-text">
					<image src="@/pagesPet/static/icon/wx.png" mode=""></image>
					<view class="">
						微信扫一扫
					</view>
				</view>
			</view>
		</view>

		<view class="btn" @click="addBind" v-if="tabIndex == 0">
			确认绑定
		</view>

	</view>
</template>

<script>
	import {
		bindCargo,
		getCargoList,
		getBindUser
	} from "@/api/pet/binding/index"
	import {
		opCargo
	} from "@/api/pet/index/saler"
	import util from "@/common/util"
	import regRule from '@/common/rules'
	export default {
		data() {
			return {
				tabIndex: 0,
				tabList: [{
					name: '手机绑定'
				}, {
					name: '扫码绑定'
				}, ],
				typeIndex: -1,
				typeList: [],
				form: {
					// bindUserId: "",
					bindPhone: "",
					price:'',
				},
				id:''
			}
		},
		onLoad(e) {
			this.id = e.id
			
			this.getCargoList()
		},
		methods: {
			inputChange(e) {
				// let {
				// 	value
				// } = e.detail
				// if(regRule.phone.test(value)){
				// 	util.debounce(() => {
				// 		getBindUser({
				// 			bindPhone: value,
				// 		}).then(res => {
				// 			this.form.bindUserId = res.data || ''
				// 		})
				// 	}, 500)
				// }
			},
			submitPrice(){
				if (!this.form.price) {
					uni.showToast({
						title: "请填写价格",
						icon: "none"
					})
					return
				}
				opCargo({
					opid:this.typeList[this.typeIndex].id,
					field:'price',
					value:this.form.price
				}).then(res=>{
					uni.showToast({
						title: "操作成功",
						icon: "none"
					})
				})
			},
			priceChange(e){
				let value = e.detail.value.replace(/\s+/g, '');
				// if(!value){
				// 	return uni.showToast({
				// 		title:'请填写数据',
				// 		icon:'none'
				// 	})
				// }
				this.form.price = this.truncateToTwoDecimalPlaces(value)
				
			},
			handlePicker(e) {
				if(!this.typeList.length){
					return
				}
				this.typeIndex = e.detail.value
			},
			getCargoList() {
				var teamInfo = uni.getStorageSync('pet_team')
				getCargoList({
					teamId: teamInfo.teamId,
					bindStatus:"UNBIND"
				}).then(res => {
					this.typeList = res || []
					if(this.id){
						this.typeIndex = this.typeList.findIndex(item=>{
							return item.id == this.id
						})
						
						console.log(this.typeIndex,this.id, 'getCargoList')
					}
				})
			},
			addBind() {
				let form = this.form
				if (!this.typeList[this.typeIndex]?.id) {
					uni.showToast({
						title: "请选择宠物",
						icon: "none"
					})
					return
				}
				if (!this.form.price) {
					uni.showToast({
						title: "请填写价格",
						icon: "none"
					})
					return
				}
				if (!regRule.phone.test(form.bindPhone)) {
					return uni.showToast({
						icon: 'none',
						title: '手机号格式不正确'
					})
				}
			
				bindCargo({
					...form,
					id: this.typeList[this.typeIndex].id,
				}).then(res => {
					if(res){
						uni.showToast({
							title: "绑定成功",
							icon: "none"
						})
						setTimeout(() => {
							let pages = getCurrentPages()
							let prevPage = pages[pages.length - 2]
							if (prevPage?.$vm?.handlePathInit) {
								prevPage?.$vm?.handlePathInit('init', {})
							}
							uni.navigateBack()
						}, 500)
					}
				
				})
			},
			handleTab(index) {
				this.tabIndex = index
			},
			truncateToTwoDecimalPlaces(num) {
			    // 将数字转换为字符串
			    let numStr = num.toString();
				let numList = numStr.split('.')
				if(numList.length>2){
					return uni.showToast({
						title:'请填写正确数值',
						icon:'none'
					})
				}
			    // 找到小数点的位置
			    let decimalIndex = numStr.indexOf('.');
			    // 如果没有小数点，直接返回原数字
			    if (decimalIndex === -1) {
			        return num;
			    }
			    let truncatedStr = numStr.substring(0, decimalIndex + 3);
			    // 将截取后的字符串转换回数字
			    return parseFloat(truncatedStr);
			}
		}
	}
</script>
<style>
	.petInputStyle {
		color: #BBBBBB;
	}
</style>
<style scoped lang="scss">
	.btn {
		margin: 160rpx auto 0;
		width: 686rpx;
		background: var(--primaryBg);
		border-radius: 53rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: var(--btnColor);
		line-height: 106rpx;
		text-align: center;
	}

	.bg {
		width: 100%;
		height: 600rpx;
		position: absolute;
		top: 0;
		left: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.box {
		margin-top: 424rpx;
		width: 100%;

		.tab {
			width: 100%;
			padding: 30rpx 187rpx 64rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.tab-item {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: var(--h3Color);
				line-height: 45rpx;
				position: relative;
			}

			.active {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: var(--h1Color);
				line-height: 45rpx;

				&::after {
					content: '';
					position: absolute;
					left: 50%;
					top: 30rpx;
					transform: translateX(-50%);
					z-index: -1;
					width: 128rpx;
					height: 16rpx;
					background: var(--primaryBg);
					border-radius: 8rpx;
				}
			}
		}

		.item {
			// height: 152rpx;
			border-bottom: 1rpx solid #E5E5E5;
			display: flex;
			align-items: center;
			padding: 96rpx 0 24rpx;
			margin: 0 48rpx;
			box-sizing: border-box;

			.item-pick {
				width: 100%;
				flex: 1;
			}

			image {
				width: 24rpx;
				height: 24rpx;
			}

			view,
			input {
				width: 100%;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				// color: #BBBBBB;
				line-height: 48rpx;
			}
			.text{
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #222222;
				line-height: 48rpx;
				width: max-content;
			}
			.price{
				padding:0 20rpx;
				border-radius: 10rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #fff;
				line-height: 48rpx;
				width: max-content;
				margin-left: 20rpx;
				background: red;
			}
		}

		.code {
			margin-top: 96rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.code-img {
				width: 320rpx;
				height: 320rpx;
				border-radius: 16rpx;
				border: 1rpx solid #eee;
				padding: 20rpx;
				box-sizing: border-box;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.code-text {
				display: flex;
				align-items: center;
				padding: 32rpx 0;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
				}

				view {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color:var(--h1Color);
					line-height: 33rpx;
				}
			}
		}
	}
</style>